<template>
	<view class="admin">
		<u-skeleton rows="3" :loading="loading" avatar avatarSize="120rpx" :title="false">
			<view class="admin-header flex">
				<u--image :showLoading="true" lazyLoad :src="detailsData.avatar[0].url" radius="10" width="160rpx"
					height="160rpx" />
				<view class="admin-header-center flexCol ml10 mr10">
					<text class="mb5">{{ detailsData.userName || '未命名店铺' }}</text>
					<text v-if="detailsData.descText" class="fs12 mb5"
						style="color: #909399;">{{ detailsData.descText}}</text>
					<u-rate v-model="detailsData.count" gutter="6" :touchable="false" allowHalf activeColor="#ea64a2" />
				</view>
				<u-button text="客服" icon="chat" iconColor="#ffffff" size="mini" />
			</view>
		</u-skeleton>
		<u-skeleton rows="2" :loading="loading" :title="false">
			<view class="admin-details flexCol">
				<text v-if="detailsData.province"
					class="mt5 mb5">店铺地址：{{ detailsData.province }}{{ detailsData.city }}{{ detailsData.county }}{{ detailsData.addressDetail }}</text>
				<u-line />
				<text class="mt5 mb5">店铺联系电话：{{ detailsData.phone }}</text>
			</view>
		</u-skeleton>

		<view class="admin-nav mt10">
			<u-sticky bgColor="#ffffff">
				<u-tabs :list="adminOptons" lineColor="#ea64a2" />
			</u-sticky>
		</view>
		<view class="admin-box mt5">
			<u-skeleton :loading="loading" rows="4" :title="false" :rowsHeight="140">
				<view class="admin-box-list flexWrap">
					<view v-for="(item, index) in tableData" :key="index" class="admin-box-list-item">
						<Cgoodscard :goods="item" />
					</view>
				</view>
				<u-loadmore :status="indexStatus" nomoreText="实在没有了" />
			</u-skeleton>
		</view>

	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		}, // 父组件设置 options.styleIsolation 可穿透子组件，以及页面
		data() {
			return {
				loading: true, // 骨架屏
				listQuery: { // 列表查询参数
					page: 1,
					size: 6,
					total: 0,
					pageNum: 0,
					adminId: '',
				},
				detailsData: '', // 店铺数据
				tableData: [], // 商品列表数据
				adminOptons: [{
					name: '全部商品'
				}],
				indexStatus: 'loadmore', // 下拉加载组件状态
			};
		},
		onShow() {
			const routes = getCurrentPages()
			this.listQuery.adminId = routes[routes.length - 1].options.adminId
			this.getList()
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
		onReachBottom() {
			if (this.listQuery.page === this.listQuery.pageNum) { // 已到最后一页
				this.indexStatus = 'nomore'
				return
			}
			this.indexStatus = 'loading ' // 开始加载
			this.listQuery.page = this.listQuery.page + 1
			this.getList()
		},
		methods: {
			// 初始化
			async getList() {
				this.loading = true
				const {
					code: detailsCode,
					data: detailsData
				} = await this.$adminUser.adminUserGetDetails({
					adminId: this.listQuery.adminId
				})
				const {
					code: listCode,
					data: listData
				} = await this.$adminUser.adminUserGetList(this.listQuery)
				if (detailsCode === 0 && listCode === 0) {
					this.detailsData = detailsData
					this.tableData.push(...listData.list)
					this.listQuery.total = listData.total
					this.listQuery.pageNum = listData.pageNum
					this.loading = false

					this.listQuery.page === this.listQuery.pageNum ?
						this.indexStatus = 'nomore' : this.indexStatus = 'loadmore'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-skeleton {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-top: 20rpx;

		&__wrapper__content__rows {
			width: 100% !important;
		}
	}

	.admin {
		&-header {
			/deep/ .u-button {
				width: 130rpx;
				color: #FFFFFF;
				background-color: $uni-color-primary;
				border-color: $uni-color-primary;
			}

			/deep/ .u-rate {
				pointer-events: none;
			}
		}

		&-details {
			color: #606266;
			font-size: 28rpx;
			padding: 10rpx 20rpx;
			background-color: #FFFFFF;
		}

		&-nav {
			/deep/ .u-tabs__wrapper__nav {
				justify-content: center;

				&__line {
					transform: initial !important;
				}
			}
		}

		&-box {
			/deep/ .u-skeleton {
				background-color: #ebebeb !important;
				margin-top: 0 !important;
				padding: 0 !important;
			}
			&-list {
				&-item {
					box-sizing: border-box;
					flex: 0 0 50%;
					padding: 10rpx;
				}
			}
		}

	}
</style>
